<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>积分商城 - 新时代文明实践智慧服务系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background: #f5f5f5;
            overflow-x: hidden;
            padding-top: 44px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航栏 */
        .navbar {
            background: linear-gradient(to bottom, #fce4ec 0%, #fff3e0 100%);
            color: #ff6b00;
            height: 44px;
            padding: 0 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            box-shadow: 0 2px 8px rgba(255,107,0,0.2);
        }
        
        .navbar-left {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }
        
        .back-btn {
            font-size: 18px;
        }
        
        .navbar-title {
            font-size: 16px;
            font-weight: bold;
        }
        
        .navbar-right {
            font-size: 18px;
            cursor: pointer;
        }
        
        /* 用户积分卡 */
        .points-card {
            background: linear-gradient(135deg, #ff6b00 0%, #ffa726 100%);
            margin: 15px;
            border-radius: 16px;
            padding: 20px;
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        .points-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            transform: rotate(45deg);
            pointer-events: none;
        }
        
        .points-info {
            position: relative;
            z-index: 2;
        }
        
        .points-title {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 5px;
        }
        
        .points-value {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .points-actions {
            display: flex;
            gap: 10px;
        }
        
        .points-btn {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .points-btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        
        /* 分类导航 */
        .category-nav {
            background: white;
            margin: 0 15px 15px;
            border-radius: 16px;
            padding: 15px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .category-scroll {
            display: flex;
            gap: 15px;
            overflow-x: auto;
            padding-bottom: 5px;
        }
        
        .category-scroll::-webkit-scrollbar {
            display: none;
        }
        
        .category-item {
            text-align: center;
            min-width: 60px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .category-item.active .category-icon {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
        }
        
        .category-item.active .category-name {
            color: #ff6b00;
            font-weight: bold;
        }
        
        .category-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #f0f2f5;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin: 0 auto 8px;
            transition: all 0.3s;
        }
        
        .category-name {
            font-size: 12px;
            color: #666;
            white-space: nowrap;
        }
        
        /* 推荐商品 */
        .featured-section {
            margin: 0 15px 15px;
        }
        
        .section-title {
            background: white;
            border-radius: 16px 16px 0 0;
            padding: 15px 20px;
            font-size: 16px;
            font-weight: bold;
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .featured-scroll {
            background: white;
            border-radius: 0 0 16px 16px;
            padding: 15px;
            overflow-x: auto;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .featured-scroll::-webkit-scrollbar {
            display: none;
        }
        
        .featured-list {
            display: flex;
            gap: 15px;
            padding-bottom: 5px;
        }
        
        .featured-item {
            min-width: 120px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .featured-item:hover {
            transform: translateY(-2px);
        }
        
        .featured-image {
            width: 120px;
            height: 120px;
            border-radius: 12px;
            background: linear-gradient(135deg, #ffd89b, #19547b);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            margin-bottom: 8px;
            position: relative;
            overflow: hidden;
        }
        
        .hot-badge {
            position: absolute;
            top: 5px;
            right: 5px;
            background: #ff4d4f;
            color: white;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 8px;
        }
        
        .featured-name {
            font-size: 13px;
            color: #333;
            margin-bottom: 4px;
            font-weight: bold;
        }
        
        .featured-points {
            font-size: 14px;
            color: #ff6b35;
            font-weight: bold;
        }
        
        /* 商品网格 */
        .products-section {
            background: white;
            margin: 0 15px 15px;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .products-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .products-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .filter-btn {
            background: #f0f2f5;
            color: #666;
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 12px;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .filter-btn:hover {
            background: #ff6b00;
            color: white;
        }
        
        .products-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        
        .product-card {
            border: 1px solid #f0f2f5;
            border-radius: 12px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
        }
        
        .product-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border-color: #ff6b00;
        }
        
        .product-image {
            width: 100%;
            height: 100px;
            border-radius: 8px;
            background: linear-gradient(135deg, #a8edea, #fed6e3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            margin-bottom: 10px;
        }
        
        .product-name {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
            line-height: 1.3;
        }
        
        .product-desc {
            font-size: 11px;
            color: #999;
            margin-bottom: 8px;
            line-height: 1.4;
        }
        
        .product-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .product-points {
            font-size: 16px;
            color: #ff6b35;
            font-weight: bold;
        }
        
        .exchange-btn {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 12px;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .exchange-btn:hover {
            transform: scale(1.05);
        }
        
        .exchange-btn:disabled {
            background: #f0f2f5;
            color: #999;
            cursor: not-allowed;
            transform: none;
        }
        
        .stock-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #52c41a;
            color: white;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 8px;
        }
        
        .stock-badge.low {
            background: #faad14;
        }
        
        .stock-badge.out {
            background: #ff4d4f;
        }
        
        /* 兑换记录 */
        .history-section {
            background: white;
            margin: 0 15px 15px;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .history-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .history-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .view-all {
            color: #ff6b00;
            font-size: 12px;
            cursor: pointer;
        }
        
        .history-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .history-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        
        .history-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: linear-gradient(135deg, #ffd89b, #f59e0b);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
        }
        
        .history-info {
            flex: 1;
        }
        
        .history-name {
            font-size: 13px;
            font-weight: bold;
            color: #333;
            margin-bottom: 2px;
        }
        
        .history-time {
            font-size: 11px;
            color: #999;
        }
        
        .history-points {
            font-size: 14px;
            color: #ff6b35;
            font-weight: bold;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            display: flex;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        
        .nav-item {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .nav-icon {
            font-size: 20px;
            margin-bottom: 2px;
        }
        
        .nav-label {
            font-size: 10px;
            color: #999;
        }
        
        .nav-item.active .nav-icon {
            color: #ff6b00;
        }
        
        .nav-item.active .nav-label {
            color: #ff6b00;
        }
        
        /* 弹窗 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }
        
        .modal-content {
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin: 20px;
            max-width: 300px;
            width: 100%;
            text-align: center;
        }
        
        .modal-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .modal-message {
            font-size: 14px;
            color: #666;
            margin-bottom: 20px;
            line-height: 1.5;
        }
        
        .modal-actions {
            display: flex;
            gap: 10px;
        }
        
        .modal-btn {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .modal-btn-cancel {
            background: #f0f2f5;
            color: #666;
        }
        
        .modal-btn-confirm {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="navbar">
        <div class="navbar-left" onclick="goBack()">
            <span class="back-btn">←</span>
            <span class="navbar-title">积分商城</span>
        </div>
        <div class="navbar-right" onclick="showPointsHistory()">
            📊
        </div>
    </div>
    
    <!-- 积分卡片 -->
    <div class="points-card">
        <div class="points-info">
            <div class="points-title">我的积分</div>
            <div class="points-value" id="userPoints">1,250</div>
            <div class="points-actions">
                <button class="points-btn" onclick="earnPoints()">💰 赚积分</button>
                <button class="points-btn" onclick="showPointsRules()">📖 积分规则</button>
            </div>
        </div>
    </div>
    
    <!-- 分类导航 -->
    <div class="category-nav">
        <div class="category-scroll">
            <div class="category-item active" onclick="switchCategory(this, 'all')">
                <div class="category-icon">🎁</div>
                <div class="category-name">全部</div>
            </div>
            <div class="category-item" onclick="switchCategory(this, 'entertainment')">
                <div class="category-icon">🎬</div>
                <div class="category-name">娱乐</div>
            </div>
            <div class="category-item" onclick="switchCategory(this, 'education')">
                <div class="category-icon">📚</div>
                <div class="category-name">教育</div>
            </div>
            <div class="category-item" onclick="switchCategory(this, 'sports')">
                <div class="category-icon">🏃</div>
                <div class="category-name">运动</div>
            </div>
            <div class="category-item" onclick="switchCategory(this, 'food')">
                <div class="category-icon">🍔</div>
                <div class="category-name">美食</div>
            </div>
            <div class="category-item" onclick="switchCategory(this, 'life')">
                <div class="category-icon">🏠</div>
                <div class="category-name">生活</div>
            </div>
        </div>
    </div>
    
    <!-- 推荐商品 -->
    <div class="featured-section">
        <div class="section-title">
            🔥 热门推荐
        </div>
        <div class="featured-scroll">
            <div class="featured-list">
                <div class="featured-item" onclick="exchangeProduct('电影券', 500)">
                    <div class="featured-image">
                        🎫
                        <span class="hot-badge">热</span>
                    </div>
                    <div class="featured-name">电影券</div>
                    <div class="featured-points">500积分</div>
                </div>
                <div class="featured-item" onclick="exchangeProduct('咖啡券', 200)">
                    <div class="featured-image">☕</div>
                    <div class="featured-name">咖啡券</div>
                    <div class="featured-points">200积分</div>
                </div>
                <div class="featured-item" onclick="exchangeProduct('图书卡', 300)">
                    <div class="featured-image">📚</div>
                    <div class="featured-name">图书卡</div>
                    <div class="featured-points">300积分</div>
                </div>
                <div class="featured-item" onclick="exchangeProduct('健身卡', 800)">
                    <div class="featured-image">
                        🏃
                        <span class="hot-badge">新</span>
                    </div>
                    <div class="featured-name">健身卡</div>
                    <div class="featured-points">800积分</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 商品列表 -->
    <div class="products-section">
        <div class="products-header">
            <div class="products-title">
                🛍️ 精选商品
            </div>
            <button class="filter-btn" onclick="showFilter()">筛选</button>
        </div>
        <div class="products-grid" id="productsGrid">
            <div class="product-card" onclick="exchangeProduct('电影票', 500)">
                <span class="stock-badge">库存充足</span>
                <div class="product-image">🎬</div>
                <div class="product-name">万达电影票</div>
                <div class="product-desc">全国通用，有效期6个月</div>
                <div class="product-footer">
                    <span class="product-points">500积分</span>
                    <button class="exchange-btn" onclick="event.stopPropagation(); exchangeProduct('电影票', 500)">兑换</button>
                </div>
            </div>
            
            <div class="product-card" onclick="exchangeProduct('星巴克券', 350)">
                <span class="stock-badge">库存充足</span>
                <div class="product-image">☕</div>
                <div class="product-name">星巴克代金券</div>
                <div class="product-desc">30元代金券，全国门店通用</div>
                <div class="product-footer">
                    <span class="product-points">350积分</span>
                    <button class="exchange-btn" onclick="event.stopPropagation(); exchangeProduct('星巴克券', 350)">兑换</button>
                </div>
            </div>
            
            <div class="product-card" onclick="exchangeProduct('图书卡', 300)">
                <span class="stock-badge low">库存紧张</span>
                <div class="product-image">📚</div>
                <div class="product-name">当当图书卡</div>
                <div class="product-desc">50元图书卡，购书专用</div>
                <div class="product-footer">
                    <span class="product-points">300积分</span>
                    <button class="exchange-btn" onclick="event.stopPropagation(); exchangeProduct('图书卡', 300)">兑换</button>
                </div>
            </div>
            
            <div class="product-card" onclick="exchangeProduct('健身月卡', 800)">
                <span class="stock-badge">库存充足</span>
                <div class="product-image">🏋️</div>
                <div class="product-name">健身房月卡</div>
                <div class="product-desc">本地健身房通用月卡</div>
                <div class="product-footer">
                    <span class="product-points">800积分</span>
                    <button class="exchange-btn" onclick="event.stopPropagation(); exchangeProduct('健身月卡', 800)">兑换</button>
                </div>
            </div>
            
            <div class="product-card" onclick="exchangeProduct('演出票', 1000)">
                <span class="stock-badge low">库存紧张</span>
                <div class="product-image">🎭</div>
                <div class="product-name">音乐会门票</div>
                <div class="product-desc">本月音乐会门票，限量发放</div>
                <div class="product-footer">
                    <span class="product-points">1000积分</span>
                    <button class="exchange-btn" onclick="event.stopPropagation(); exchangeProduct('演出票', 1000)">兑换</button>
                </div>
            </div>
            
            <div class="product-card" onclick="exchangeProduct('购物券', 1500)">
                <span class="stock-badge out">已售罄</span>
                <div class="product-image">🛒</div>
                <div class="product-name">超市购物券</div>
                <div class="product-desc">100元超市购物券</div>
                <div class="product-footer">
                    <span class="product-points">1500积分</span>
                    <button class="exchange-btn" disabled>已售罄</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 兑换记录 -->
    <div class="history-section">
        <div class="history-header">
            <div class="history-title">
                📜 最近兑换
            </div>
            <span class="view-all" onclick="showFullHistory()">查看全部</span>
        </div>
        <div class="history-list">
            <div class="history-item">
                <div class="history-icon">🎫</div>
                <div class="history-info">
                    <div class="history-name">电影票券</div>
                    <div class="history-time">2024-01-15 14:30</div>
                </div>
                <div class="history-points">-500积分</div>
            </div>
            <div class="history-item">
                <div class="history-icon">📚</div>
                <div class="history-info">
                    <div class="history-name">图书卡</div>
                    <div class="history-time">2024-01-10 09:15</div>
                </div>
                <div class="history-points">-300积分</div>
            </div>
            <div class="history-item">
                <div class="history-icon">☕</div>
                <div class="history-info">
                    <div class="history-name">咖啡券</div>
                    <div class="history-time">2024-01-08 16:45</div>
                </div>
                <div class="history-points">-200积分</div>
            </div>
        </div>
    </div>
    
    <!-- 兑换确认弹窗 -->
    <div class="modal" id="exchangeModal">
        <div class="modal-content">
            <div class="modal-title">确认兑换</div>
            <div class="modal-message" id="exchangeMessage"></div>
            <div class="modal-actions">
                <button class="modal-btn modal-btn-cancel" onclick="closeModal()">取消</button>
                <button class="modal-btn modal-btn-confirm" onclick="confirmExchange()">确认兑换</button>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item" onclick="location.href='index.html'">
            <div class="nav-icon">🏠</div>
            <div class="nav-label">首页</div>
        </div>
        <div class="nav-item" onclick="location.href='venues.html'">
            <div class="nav-icon">📍</div>
            <div class="nav-label">阵地</div>
        </div>
        <div class="nav-item" onclick="location.href='activities.html'">
            <div class="nav-icon">📅</div>
            <div class="nav-label">活动</div>
        </div>
        <div class="nav-item" onclick="location.href='services.html'">
            <div class="nav-icon">🎁</div>
            <div class="nav-label">服务</div>
        </div>
        <div class="nav-item active">
            <div class="nav-icon">🛍️</div>
            <div class="nav-label">商城</div>
        </div>
    </div>
    
    <script>
        let userPoints = 1250;
        let currentExchange = null;
        
        // 返回上一页
        function goBack() {
            history.back();
        }
        
        // 切换分类
        function switchCategory(element, category) {
            document.querySelectorAll('.category-item').forEach(item => {
                item.classList.remove('active');
            });
            element.classList.add('active');
            
            // 这里可以根据分类筛选商品
            console.log('切换到分类:', category);
        }
        
        // 兑换商品
        function exchangeProduct(productName, points) {
            if (points > userPoints) {
                alert('积分不足！\n当前积分：' + userPoints + '\n需要积分：' + points);
                return;
            }
            
            currentExchange = { name: productName, points: points };
            document.getElementById('exchangeMessage').textContent = 
                `确定要兑换 ${productName} 吗？\n需要消耗 ${points} 积分\n剩余积分：${userPoints - points}`;
            document.getElementById('exchangeModal').style.display = 'flex';
        }
        
        // 确认兑换
        function confirmExchange() {
            if (currentExchange) {
                userPoints -= currentExchange.points;
                document.getElementById('userPoints').textContent = userPoints.toLocaleString();
                
                alert(`兑换成功！\n${currentExchange.name} 已添加到您的账户\n当前积分：${userPoints}`);
                
                // 添加到兑换记录
                addToHistory(currentExchange.name, currentExchange.points);
                
                currentExchange = null;
            }
            closeModal();
        }
        
        // 关闭弹窗
        function closeModal() {
            document.getElementById('exchangeModal').style.display = 'none';
            currentExchange = null;
        }
        
        // 添加到兑换记录
        function addToHistory(productName, points) {
            const historyList = document.querySelector('.history-list');
            const now = new Date();
            const timeStr = now.getFullYear() + '-' + 
                           String(now.getMonth() + 1).padStart(2, '0') + '-' + 
                           String(now.getDate()).padStart(2, '0') + ' ' +
                           String(now.getHours()).padStart(2, '0') + ':' + 
                           String(now.getMinutes()).padStart(2, '0');
            
            const icons = {
                '电影票': '🎫', '电影券': '🎫',
                '图书卡': '📚',
                '咖啡券': '☕', '星巴克券': '☕',
                '健身卡': '🏋️', '健身月卡': '🏋️',
                '演出票': '🎭',
                '购物券': '🛒'
            };
            
            const icon = icons[productName] || '🎁';
            
            const newItem = document.createElement('div');
            newItem.className = 'history-item';
            newItem.innerHTML = `
                <div class="history-icon">${icon}</div>
                <div class="history-info">
                    <div class="history-name">${productName}</div>
                    <div class="history-time">${timeStr}</div>
                </div>
                <div class="history-points">-${points}积分</div>
            `;
            
            historyList.insertBefore(newItem, historyList.firstChild);
            
            // 只保留最近3条记录
            const items = historyList.querySelectorAll('.history-item');
            if (items.length > 3) {
                items[3].remove();
            }
        }
        
        // 赚取积分
        function earnPoints() {
            alert('赚取积分的方式：\n• 参与志愿活动\n• 完成每日签到\n• 邀请好友注册\n• 参与社区建设');
        }
        
        // 积分规则
        function showPointsRules() {
            alert('积分规则说明：\n\n📝 获得积分：\n• 每日签到：+10积分\n• 参与志愿活动：+30-100积分\n• 完成服务：+20-50积分\n• 邀请好友：+50积分\n\n💰 消耗积分：\n• 兑换商品根据价值消耗\n• 积分有效期为2年\n• 兑换后不可退换');
        }
        
        // 显示积分历史
        function showPointsHistory() {
            alert('积分历史功能开发中...\n将显示完整的积分收支记录');
        }
        
        // 显示筛选
        function showFilter() {
            alert('筛选功能：\n• 按积分范围筛选\n• 按商品类型筛选\n• 按库存状态筛选\n\n功能开发中...');
        }
        
        // 查看完整兑换记录
        function showFullHistory() {
            alert('完整兑换记录功能开发中...\n将显示所有历史兑换记录');
        }
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            // 更新积分显示
            document.getElementById('userPoints').textContent = userPoints.toLocaleString();
            
            // 阻止按钮事件冒泡
            document.querySelectorAll('.exchange-btn').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                });
            });
        });
    </script>
</body>
</html>